<template>
  <div class="c-detail-cell-item">
    <div class="item-label">{{ props.label }}{{ props.hasColon && '：' }}</div>
    <div class="item-value"
      ><slot>{{ empty(props.value) }}</slot></div
    >
  </div>
</template>

<script lang="ts" setup name="CDetailCellItem">
import { defineProps, withDefaults } from 'vue';
import { empty } from '@/utils';

interface CDetailCellItemProps {
  label: string;
  hasColon?: boolean;
  value?: string;
}
const props = withDefaults(defineProps<CDetailCellItemProps>(), {
  hasColon: true
});
</script>

<style lang="scss" scoped>
.c-detail-cell-item {
  display: flex;
  line-height: 32px;
  .item-label {
    padding: 5px 0;
    margin-right: 12px;
    flex-shrink: 0;
    // width: 133px;
    font-size: 14px;
    font-weight: 400;
    color: #7a8a99;
    line-height: 22px;
  }
  .item-value {
    padding: 5px 0;
    flex: 1;
    font-size: 14px;
    font-weight: 400;
    color: #435970;
    line-height: 22px;
  }
}
</style>
